<template>
	<div class="app-container">
		<el-container>
			<el-header>
				<div class="toolbar top_box">
					<el-button class="btnPrev btnti" title="pageup" @click="onPageup()">上一题</el-button>
					<el-button class="btnNext btnti" title="pagedown" @click="onPagedown()">下一题</el-button>
					【
					<span class="fontLarge" i18n="big font" @click="changeFontSize('Large')">大</span>
					<span class="fontMiddle" i18n="mid font" style="color:#ff5a09;" @click="changeFontSize('Middle')">中</span>
					<span class="fontSmall" i18n="small font" @click="changeFontSize('Small')">小</span>
					】
					<!-- 倒计时begin -->
					<span class="countdowntime mr_30">
						距交卷
						<a class="mr_30 countdownHH">1</a>
						<a class="mr_30 countdownMM">2</a>
						<a class="countdownSS">3</a>
					</span>
					<!-- 倒计时end -->
					<el-button type="button" id="btnSave" class="btnSave btnss">保存</el-button>
					<el-button type="button" id="btnSubmit" class="btnss">交卷</el-button>
				</div>
			</el-header>
			<el-main>
				<el-row>
					<!--答题卡显示区域-->
					<el-col :span="4" class="leftbox" id="askquestion">
						<el-form>
							<el-form-item><h1>答题情况</h1></el-form-item>
							<el-form-item class="notes">
								<ul>
									<li>
										<a class="mr_10">
											<span class="iconnotreplied"></span>
											未答
										</a>
										<a class="mr_10">
											<span class="iconreplied"></span>
											已答
										</a>
										<span class="iconsaved"></span>
										己保存
									</li>
									<li>
										作答进度
										<span id="txtPercent"></span>
										<el-progress :text-inside="true" :stroke-width="18" :percentage="100" color="rgba(142, 113, 199, 0.7)"></el-progress>
									</li>
								</ul>
							</el-form-item>
							<el-form-item>
								<h2>一. 单项题</h2>
								<div class="card_top"></div>
								<div class="card_center"></div>
								<div class="card_foot"></div>
							</el-form-item>
							<el-form-item>
								<h2>二. 多项题</h2>
								<div class="card_top"></div>
								<div class="card_center"></div>
								<div class="card_foot"></div>
							</el-form-item>
							<el-form-item>
								<h2>三. 判断题</h2>
								<div class="card_top"></div>
								<div class="card_center"></div>
								<div class="card_foot"></div>
							</el-form-item>
						</el-form>
					</el-col>
					<!--题目显示区域-->
					<el-col id="questionbox" :span="18" class="table_box" style="overflow-y: scroll;" v-bind:style="styleObject">
						<el-form>
							<el-form-item class="arrange papertitle">
								<span class="title">{{ resData.exam.title }}</span>
								<span class="score">(共{{ totalquestion }}题，共{{ totalgoal }}分)</span>
							</el-form-item>
							<el-form-item class="section" v-if="resData.eed.dxsize > 0" style="text-align: left;">
								<span class="note">一. 单选题 (共{{ resData.eed.dxsize }}题，共{{ resData.eed.dxsize * resData.eed.dxcustomscore }}分)</span>
							</el-form-item>
							<el-form-item
								class="question efitem"
								:id="'question-' + (index + 1)"
								v-for="(item, index) in dxquestions"
								:key="item.question.id"
								:mdkey="'question' + item.question.id"
							>
								<div class="snblock">{{ index + 1 }}.</div>
								<span style="margin-left: 50px;">{{ item.question.title }}</span>

								<span class="score">[{{ resData.eed.dxcustomscore }}分]</span>
								<div class="blank01"></div>
								<el-radio-group @change="dxchange(index + 1)" v-model="dxmodel[rodioname + item.question.id]" class="userAnswer choice" style="margin-left: 50px;">
									<tr v-for="(ritem, rindex) in item.results" :key="ritem.id">
										<el-radio :label="ritem.id">{{ ritem.text }}</el-radio>
									</tr>
								</el-radio-group>
							</el-form-item>

							<el-form-item class="section" v-if="resData.eed.dxxsize > 0" style="text-align: left;">
								<span class="note">二. 多选题 (共{{ resData.eed.dxxsize }}题，共{{ resData.eed.dxxsize * resData.eed.dxxcustomscore }}分)</span>
							</el-form-item>
							<el-form-item
								class="question efitem"
								:id="'question-' + (index + 1)"
								v-for="(item, index) in dxxquestions"
								:key="item.question.id"
								:mdkey="'question' + item.question.id"
							>
								<div class="snblock">{{ index + 1 }}.</div>
								<span style="margin-left: 50px;">{{ item.question.title }}</span>
								<span class="score">[{{ resData.eed.dxxcustomscore }}分]</span>
								<div class="blank01"></div>
									<el-checkbox-group @change="dxxchange(index + 1 + dxquestions.length)" v-model="dxxmodel[checkname + item.question.id]" style="margin-left: 50px;">
									<el-checkbox :label="ritem.id" v-for="(ritem, rindex) in item.results" :key="item.id">{{ ritem.text }}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>
<script>
import { getToken } from '@/utils/auth';
import { GetBackViewPaper } from '@/api/exam';
import './exam.css';
export default {
	data() {
		return {
			listData: [],
			styleObject: {},
			resData: {
				eed: {},
				exam: {},
				list: [],
				userpaper: {}
			},
			rodioname: 'rodio',
			checkname: 'check',
			goalname: 'goal',
			inputname: 'input',
			hasboolean: 'hasboolean',
			totalquestion: 0,
			totalgoal: 0,
			dxquestions: [],
			dxxquestions: [],
			pdquestions: [],
			tkquestions: [],
			dxmodel: {},
			tkmodel: {},
			dxxmodel: {},
			pdmodel: {}
		};
	},
	methods: {
		initData() {
			let list = this.listData;
			this.dxmodel = {};
			this.tkmodel = {};
			this.dxxmodel = {};
			this.pdmodel = {};
			this.totalquestion = this.resData.eed.dxsize + this.resData.eed.dxxsize + this.resData.eed.tksize + this.resData.eed.pdsize;
			this.totalgoal =
				this.resData.eed.dxsize * this.resData.eed.dxcustomscore +
				this.resData.eed.dxxsize * this.resData.eed.dxxcustomscore +
				this.resData.eed.tksize * this.resData.eed.tkcustomscore +
				this.resData.eed.pdsize * this.resData.eed.pdcustomscore;
			//分类题目
			for (let i = 0; i < list.length; i++) {
				if (list[i].question.typeid == 1) {
					this.dxquestions.push(list[i]);
					var prop = 'rodio' + list[i].question.id;
					this.createJson(this.dxmodel, prop, false);
				} else if (list[i].question.typeid == 2) {
					this.dxxquestions.push(list[i]);
					var prop = 'check' + list[i].question.id;
					var val = new Array();
					this.createJson(this.dxxmodel, prop, val);
				} else if (list[i].question.typeid == 3) {
					this.tkquestions.push(list[i]);
					var prop = 'input' + list[i].question.id;
					this.createJson(this.tkmodel, prop, '');
				} else if (list[i].question.typeid == 4) {
					this.pdquestions.push(list[i]);
					var prop = 'hasboolean' + list[i].question.id;
					this.createJson(this.pdmodel, prop, false);
				}
			}
		},
		dxxchange(sef) {},
		dxchange(sef) {},
		pdchange(sef) {},
		tkchange(sef) {},
		createJson(json, prop, val) {
			// 如果 val 被忽略
			if (typeof val === 'undefined') {
				// 删除属性
				delete json[prop];
			} else {
				// 添加 或 修改
				json[prop] = val;
			}
		}
	},
	mounted() {
		if (getToken()) {
			GetBackViewPaper(this.$route.query).then(res => {
				this.resData = res.data;
				this.listData = res.data.list;
				this.initData();
			});
		}
	}
};
</script>

<style>
.papertitle {
	background: #6fbbb5;
	height: auto;
	line-height: 58px;
	color: #fff;
	font-size: 1.2rem;
	border-radius: 5px 5px 0 0;
}
.fonttitle {
	font-size: 50px;
}
.efitem {
	text-align: left;
	background: #faf2e1;
}
</style>
